Server Actions
以前のブログ記事で、クライアントからサーバへデータを送信してデータベース更新やフォーム実装を行うためのソリューションである、Server Action という試みについてお伝えしました。Server Action を開発する中で、これらの API を拡張し、クライアントのみのアプリケーションでのデータ処理にも対応させることにしました。
このより広範な機能の集合は、単に「アクション (Action)」と呼ばれるようになります。アクションにより、<form/> のような DOM 要素に関数を渡すことができるようになります。
さっさとformがinteractiveになる
Server Component内に定義できる
引数と返り値はserializableでないといけない
code:server-component.ts
import kv from './kv';
export default function Page({ params }) {
async function increment() {
'use server';
await kv.incr(post:id:${params.id});
}
return (
<form action={increment}>
<button type="submit">Like</button>
</form>
);
}
別ファイルにも定義できる
Client Componentから呼べる
別に併用しなくても使える
code:ts
'use client'
import { useTransition } from 'react'
import { addItem } from '../actions'
function ExampleClientComponent({ id }) {
return (
<button onClick={() => startTransition(() => addItem(id))}>
Add To Cart
</button>
)
}
Web標準の<form> APIに組み込まれたActions